<template>
  <div class="autotile-manage">
    
    <div class="autotile-manage-image">
      <div class="autotile-manage-title">
        <Button type="primary" v-on:click="uploadHandler">上传图片</Button>
      </div>
      <div class="autotile-manage-show">
        <image-show
          v-bind:style="{ minHeight: '128px', minWidth: '96px' }"
          v-for="(autotile, index) in autoTilesData"
          v-bind:key="index"
          v-bind:is-selected="autoTileSelected == autotile"
          v-bind:src="autotile.src"
          v-bind:on-select="selectAutoTile"
          v-bind:on-delete="deleteAutoTile"></image-show>
      </div>
    </div>
    
    <Modal
      v-model="uploadModal"
      title="上传图片">
      <div class="cm-margin-bottom-5">上传AutoTile图片</div>
      <div class="cm-margin-bottom-5">重名图片将覆盖之前上传的图片，请注意</div>
      <Upload
        show-upload-list
        ref="autotileUpload"
        type="drag"
        name="autotile"
        v-bind:format="['jpg', 'jpeg', 'png']"
        v-bind:action="uploadApi"
        v-bind:on-success="uploadSuccess"
        v-bind:on-error="uploadFailed">
        <div style="padding: 20px 0">
          <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
          <p>点击或拖拽上传</p>
        </div>
      </Upload>
    </Modal>
    
    <Spin fix v-if="isLoading"></Spin>
    
  </div>
</template>

<script src="./autotileManage.js"></script>

<style lang="stylus">
@import './autotileManage.styl'
</style>
